Day16：將 TypeScript 加入到現有的 JavaScript 專案－以 To do list 為例

2024 iThome 鐵人賽

DAY 16

JavaScript

用 TypeScript 重新定義前端開發：30 天的實踐與思考系列第 16 篇

16th鐵人賽 typescript front-end 前端

Annie

2024-09-29 23:51:07

223 瀏覽

分享至

在前面的篇幅介紹了一些 TypeScript 的基礎應用，所以這篇文章中，將介紹如何將 TypeScript 加入到現有的 JavaScript 專案，並以一個簡單的 To-Do List 為例，逐步展示如何進行轉換，並提升程式碼的可讀性與可維護性。

實作

1. 初始化現有的 JavaScript 專案

假設我們已經有一個簡單的 To-Do List JavaScript 專案。而這個專案目前有這兩個主要功能 — 新增待辦事項與標記已完成事項：

<!-- index.html -->
<!DOCTYPE html>
<html lang="ZH-TW">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>To-Do List</title>
    </head>
    <body>
        <h1>To-Do List</h1>
        <input type="text" id="todo-input" placeholder="Add a new task" />
        <button id="add-btn">Add Task</button>
        <ul id="todo-list"></ul>

        <script src="app.js"></script>
    </body>
</html>

// app.js
document.getElementById('add-btn').addEventListener('click', function() {
    const input = document.getElementById('todo-input').value;
    if (input.trim()) {
        const listItem = document.createElement('li');
        listItem.textContent = input;
        document.getElementById('todo-list').appendChild(listItem);
    }
});

2.安裝 TypeScript 與相關工具

首先，我們需要在專案中安裝 TypeScript。打開終端機並執行以下指令：

npm init -y
npm install typescript --save-dev

接著，我們可以初始化 TypeScript 配置文件，執行以下指令來生成 tsconfig.json：

npx tsc --init

這份 tsconfig.json 會包含 TypeScript 的基本配置，我們可以保留默認的設定，然後接下來一步一步把 JavaScript 轉換為 TypeScript。

3.把 JavaScript 轉換為 TypeScript

首先，把 app.js 檔案變更副檔名為 app.ts，然後逐步把程式碼加上型別註記。

// app.ts
const addButton = document.getElementById('add-btn') as HTMLButtonElement;
const inputField = document.getElementById('todo-input') as HTMLInputElement;
const todoList = document.getElementById('todo-list') as HTMLUListElement;

addButton.addEventListener('click', function () {
    const input = inputField.value;
    if (input.trim()) {
        const listItem = document.createElement('li');
        listItem.textContent = input;
        todoList.appendChild(listItem);
    }
});

在這裡，使用了 TypeScript 的型別斷言 (as) 來明確指定 DOM 元素的型別。這樣能幫助 TypeScript 更精確地了解元素的型別，從而更好地進行型別檢查。

4. 編譯 TypeScript 檔案

我們可以使用 TypeScript 編譯器來將 .ts 檔案編譯為 JavaScript。執行以下指令：

npx tsc

這個命令會把 app.ts 編譯為 app.js，並生成對應的 JavaScript 檔案。

5. 增強 To-Do List：加入型別系統的力量

現在，就可以嘗試加入更多的功能、利用 TypeScript 的型別系統進一步強化程式碼囉！

我們可以定義一個 Task 型別來描述每個待辦事項，並確保待辦事項的資料結構一致：

interface Task {
    id: number;
    description: string;
    completed: boolean;
}

const tasks: Task[] = [];

addButton.addEventListener('click', function () {
    const input = inputField.value;
    if (input.trim()) {
        const newTask: Task = {
            id: tasks.length + 1,
            description: input,
            completed: false
        };
        tasks.push(newTask);
        renderTask(newTask);
    }
});

function renderTask(task: Task) {
    const listItem = document.createElement('li');
    listItem.textContent = task.description;
    todoList.appendChild(listItem);
}

可以發現，為每個待辦事項建立了一個資料結構後，就可以讓程式碼更加地清晰與好維護。